<template>
	<view class="avatarBox" :class="type == 2 ? 'yellow' : ''">
		<view style="border-bottom: 1rpx solid #ddd;padding-bottom: 10rpx;">
			<view class="flex">
				<u-image width="120rpx" height="120rpx" class="avatarImg" border-radius="50%"
					:src="ImageUrl(info.user.avatar)" @click="goDetail"></u-image>
				<view class="userName">
					<view style="text-align: left;margin-bottom: 20rpx;margin-top: 20rpx;">
						{{ info.user[$t('item.username')] }}
					</view>
					<view class="label-image">
						<view style="margin-right: 15rpx;">{{ $t('标签') }}</view>
						<u-image class="ui-image" height="40rpx" width="60rpx" v-for="(item,index) in info.user.label"
						:key="index"	:src="ImageUrl(item.url)"></u-image>
					</view>
				</view>
			</view>
			<view class="flex" style="margin-top: 10rpx;">
				<view style="margin-right: 10rpx;">{{ $t('综合评价') }}</view>
				<view>
					<user-rating :num="info.user.rating" />
				</view>
			</view>
		</view>
		<view class="flex lineP">
			<view>{{ $t('国家') }}</view>
			<view class="text">
				{{info.country == '0' ? $t("中国") : $t("俄罗斯")}}
			</view>
		</view>
		<view class="flex lineP">
			<view>{{ $t('发布时间') }}</view>
			<view class="text">
				{{ time("S", info.createtime) }}
			</view>
		</view>
		<view class="flex lineP">
			<view>{{ $t('所在城市') }}</view>
			<view class="text">
				{{info.newscitys[$t("item.city.mergename")] }}
			</view>
		</view>
	</view>
	<!-- <view class="ui-box" style="font-size: 16px;">
		<view class="ui-item" @click="goDetail">
			<view class="label">{{ $t('头像') }}</view>
			<u-image width="60rpx" height="60rpx" shape="circle" :src="ImageUrl(info.avatar)"></u-image>
		</view>
		<view class="ui-item">
			<view class="label">{{ $t('名称') }}</view>
			<view class="text" v-if="lang === 'zh'">{{ info.username }}</view>
			<view class="text" v-if="lang === 'ru'">{{ info.username_ru }}</view>
		</view>
		<view class="ui-item">
			<view class="label">{{ $t('标签') }}</view>
			<view class="label-image">
				<u-image class="ui-image" height="50rpx" width="50rpx" v-for="(item,index) in info.label"
					:src="ImageUrl(item.url)"></u-image>
			</view>
		</view>
		<view class="ui-item">
			<view class="label">{{ $t('综合评价') }}</view>
			<view class="text">
				<user-rating :num="info.rating" />
			</view>
		</view>
	</view> -->
</template>
<script>
	import {
		ImageUrl,
		time
	} from "@/common/public";
	import UserRating from "@/components/userRating.vue";

	export default {
		components: {
			UserRating
		},
		props: {
			info: {
				type: Object,
				default: {},
				required: true,
			},
			type: {
				type: String | Number,
				default: '1',
			},
		},
		data() {
			return {
				lang: ''
			}
		},
		mounted() {
			this.lang = this.$i18n.locale
			console.log('userinfo-mounted', this.info)
		},
		computed: {},
		methods: {
			time,
			ImageUrl,
			goDetail() {
				this.$u.route({
					url: "/pages/user/homePage/homePage",
					params: {
						id: this.info.id,
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatarBox {
		width: 90%;
		box-shadow: 0 0 10px #aaa;
		border-radius: 20px;
		padding: 10px 20px;
		margin: 20rpx auto;
		background: #fff;
		font-size: 30rpx;

		&.yellow {
			background: #fefcf6;
		}

		.lineP {
			color: #000;
			justify-content: flex-start !important;
			align-items: flex-start !important;
			margin-bottom: 20rpx;
			.text {
				margin-left: 20rpx;
				color: #8a8a8a;
				flex: 1;
			}
			&.flex {
				margin-top: 20rpx !important;
			}
		}

		.flex {
			display: flex;
			align-items: center;
			// justify-content: space-between;

			&+.flex {
				margin-top: 40rpx;
				justify-content: space-between;
			}

			.avatarImg {
				box-shadow: 0 0 10px #ccc;
			}

			.userName {
				font-size: 32rpx;
				// flex: 0 0 240rpx;
				text-align: center;
				margin-left: 20rpx;
				flex: 1;
			}

			.label-image {
				display: flex;
				// flex-wrap: wrap;
				align-items: center;
				// justify-content: space-between;
				text-align: left;
				margin-bottom: 10rpx;

				.ui-image {
					// margin-left: 20rpx;
					margin-top: 15rpx;
				}
			}
		}
	}
</style>